<template>
    <div>
    <p style="font-size:25px;margin-right:50px">权限列表</p>
    <el-table
      v-loading="loading"
      :data="permData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      default-expand-all
      border
      size="mini"
      :tree-props="defaultProps"
    >
      <el-table-column label="名称" width="300px">
        <template slot-scope="scope">
        <i :class="'wys- '+ scope.row.icon"></i>
        <span style="margin-left: 10px">{{ scope.row.menuName }}</span>
      </template>
      </el-table-column>
      <el-table-column label="排序编号" prop="orderNum" width="80px" align="center"></el-table-column>
      <el-table-column label="类型" prop="menuType" width="120px" align="center">
        <template slot-scope="scope">
            <el-tag size="medium"  type="danger" v-if="scope.row.menuType == 'm'">菜单</el-tag>
            <el-tag type="success" v-else-if="scope.row.menuType == 'c'">目录</el-tag>
            <el-tag type="warning" v-else-if="scope.row.menuType == 'f'">权限</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="路由" prop="url" width="150px" align="center"></el-table-column>
      <el-table-column label="权限标识" prop="perms" width="150px" align="center"></el-table-column>
      <el-table-column label="图标icon" prop="icon" width="150px" align="center"></el-table-column>
      <el-table-column label="操作" header-align="center" align="center">
        <template slot="header">
          <strong>操作</strong>
          <el-button
            style="margin-left:50px"
            plain
            size="mini"
            type="primary"
            @click="AddPermDialog"
          >增加</el-button>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index,scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="增加权限" :visible.sync="dialogAddPermVisible" width="30%">
      <el-form :model="perm">
        <el-form-item label="选择级别" label-width="100px">
          <el-select v-model="perm.menuType">
            <el-option
            v-for="item in menuTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <div v-if="perm.menuType=='m'">
          <el-form-item label="菜单名" label-width="100px">
            <el-input v-model="perm.menuName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="order_num" label-width="100px">
            <el-input v-model="perm.orderNum" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="icon" label-width="100px">
            <el-input v-model="perm.icon" autocomplete="off"></el-input>
          </el-form-item>
        </div>
        <div v-if="perm.menuType=='c'">
          <el-form-item label="父菜单" label-width="100px">
            <el-select v-model="perm.parentId" placeholder="请选择">
              <el-option
              v-for="item in dataM"
              :key="item.id"
              :label="item.menuName"
              :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="菜单名" label-width="100px">
            <el-input v-model="perm.menuName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="url" label-width="100px">
            <el-input v-model="perm.url" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="icon" label-width="100px">
            <el-input v-model="perm.icon" autocomplete="off"></el-input>
          </el-form-item>
        </div>
        <div v-if="perm.menuType=='f'">
          <el-form-item label="父目录" label-width="100px">
            <el-select v-model="perm.parentId" placeholder="请选择">
              <el-option
              v-for="item in dataC"
              :key="item.id"
              :label="item.menuName"
              :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="菜单名" label-width="100px">
            <el-input v-model="perm.menuName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="权限名" label-width="100px">
            <el-input v-model="perm.perms" style="width:150px"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddPermVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPerm">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog @open="openAlterPermDialog" title="权限详情" :visible.sync="dialogFormVisible" width="30%">
      <el-form>
      <el-form-item label="menu_type" label-width="100px">
          <el-select v-model="alterPerm.menuType" :placeholder="alterPerm.menuType">
            <el-option
            v-for="item in menuTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      <el-form v-if="alterPerm.menuType=='m'" :model="alterPerm">
        <el-form-item label="名称" label-width="100px">
          <el-input v-model="alterPerm.menuName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序号" label-width="100px">
          <el-input v-model="alterPerm.orderNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图像" label-width="100px">
          <el-input v-model="alterPerm.icon" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-form v-if="alterPerm.menuType=='c'" :model="alterPerm">
        <el-form-item label="名称" label-width="100px">
          <el-input v-model="alterPerm.menuName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父菜单" label-width="100px">
          <el-select v-model="alterPerm.parentId" placeholder="请选择">
              <el-option
              v-for="item in dataM"
              :key="item.id"
              :label="item.menuName"
              :value="item.id"
              >
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="路由" label-width="100px">
          <el-input v-model="alterPerm.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图像" label-width="100px">
          <el-input v-model="alterPerm.icon" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-form v-if="alterPerm.menuType=='f'" :model="alterPerm">
        <el-form-item label="名称" label-width="100px">
          <el-input v-model="alterPerm.menuName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父目录" label-width="100px">
          <el-select v-model="alterPerm.parentId" placeholder="请选择">
              <el-option
              v-for="item in dataC"
              :key="item.id"
              :label="item.menuName"
              :value="item.id"
              >
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item  label="权限" label-width="100px">
          <el-input v-model="alterPerm.perms" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      alterPerm:{
        id:"",
        menuName:"",
        menuType:"",
        parentId:"",
        url:"",
        perms:"",
        icon:"",
        orderNum:"",
        sonPerm:""
      },
      dataM:[],
      dataC:[],
      perm:{
        menuName:"",
        parentId:"",
        orderNum:"",
        url:"",
        menuType:"",
        perms:"",
        icon:""
      },
      old:"",
      typeChange:false,
      dialogFormVisible:false,
      dialogAddPermVisible:false,
      menuTypeOptions:[{
            value:"m",
            label:"菜单"
        },{
            value:"c",
            label:"目录"
        },{
            value:"f",
            label:"权限"
        }],
      permData:[],
      loading: true,
      parentIds:[],
      defaultProps: {
        children: "sonPerm",
        label: "name",
        value: "id",
        checkStrictly: true,
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    openAlterPermDialog(){
      this.old=this.alterPerm.menuType;
    },
    submit(){
      // console.log("old"+this.old);
      // console.log("menuType"+this.alterPerm.menuType)
      if(this.alterPerm.sonPerm==null||this.old==this.alterPerm.menuType){
        if(this.alterPerm.menuType=="m"){
          let menuPerm={
            id:this.alterPerm.id,
            menuName:this.alterPerm.menuName,
            menuType:this.alterPerm.menuType,
            parentId:0,
            orderNum:this.alterPerm.orderNum,
            icon:this.alterPerm.icon
          }
          this.$axios.post("/role/menuPerm/update", menuPerm).then((r) => {
            if (r.data.code == 200) {
              this.$message({
              message: "修改成功",
              type: "success",
              });
            this.dialogFormVisible = false;
            this.getData();
            }
          });
        }
        if(this.alterPerm.menuType=="c"){
          let menuPerm={
            id:this.alterPerm.id,
            menuName:this.alterPerm.menuName,
            menuType:this.alterPerm.menuType,
            parentId:this.alterPerm.parentId,
            url:this.alterPerm.url,
            icon:this.alterPerm.icon
          }
          this.$axios.post("/role/menuPerm/update", menuPerm).then((r) => {
            if (r.data.code == 200) {
              this.$message({
              message: "修改成功",
              type: "success",
              });
            this.dialogFormVisible = false;
            this.getData();
            }
          });
        }
        if(this.alterPerm.menuType=="f"){
          let menuPerm={
            id:this.alterPerm.id,
            menuName:this.alterPerm.menuName,
            menuType:this.alterPerm.menuType,
            parentId:this.alterPerm.parentId,
            perms:this.alterPerm.perms,
          }
          this.$axios.post("/role/menuPerm/update", menuPerm).then((r) => {
            if (r.data.code == 200) {
              this.$message({
              message: "修改成功",
              type: "success",
              });
            this.dialogFormVisible = false;
            this.getData();
            }
          });
        }
      }else{
        this.$message({
                type: "error",
                message: "修改失败，请检查子菜单是否配置!",
              });
      }
    },
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.alterPerm = row;
      this.alterIndex = index;
      // console.log(row,index)
    },
    colseAddDialog(){
      this.dialogAddPermVisible=false;
      this.perm.menuName="";
      this.perm.parentId="";
      this.perm.orderNum="";
      this.perm.url="";
      this.perm.menuType="";
      this.perm.perms="";
      this.perm.icon="";
    },
    addPerm(){
      if(this.perm.menuType=="m"){
        let menuPerm={
          menuName:this.perm.menuName,
          orderNum:this.perm.orderNum,
          parentId:0,
          menuType:this.perm.menuType,
          icon:this.perm.icon
        }
        this.$axios.post("/role/menuPerm/add",menuPerm).then((r)=>{
          if(r.data.code==200){
            this.$message({
                type: "success",
                message: "菜单添加成功!",
              });
              this.getData();
              this.colseAddDialog();
          }else{
            this.$message({
                type: "error",
                message: "菜单添加失败!",
              });
          }
        })
      }
      if(this.perm.menuType=="c"){
        let menuPerm={
          menuName:this.perm.menuName,
          parentId:this.perm.parentId,
          menuType:this.perm.menuType,
          url:this.perm.url,
          icon:this.perm.icon
        }
        this.$axios.post("/role/menuPerm/add",menuPerm).then((r)=>{
          if(r.data.code==200){
            this.$message({
                type: "success",
                message: "目录添加成功!",
              });
              this.getData();
              this.colseAddDialog();
          }else{
            this.$message({
                type: "error",
                message: "目录添加失败!",
              });
          }
        })
      }
      if(this.perm.menuType=="f"){
        let menuPerm={
          menuName:this.perm.menuName,
          parentId:this.perm.parentId,
          menuType:this.perm.menuType,
          perms:this.perm.perms,
        }
        this.$axios.post("/role/menuPerm/add",menuPerm).then((r)=>{
          if(r.data.code==200){
            this.$message({
                type: "success",
                message: "权限添加成功!",
              });
              this.getData();
              this.colseAddDialog();
          }else{
            this.$message({
                type: "error",
                message: "权限添加失败!",
              });
          }
        })
      }
    },
    // handleChange(value) {
    //   this.perm.parentId = value[value.length - 1];
    // },
    wrapData(data, permList) {
      for (const perm of data) {
        let sonPerm = [];
        for (const p of permList) {
          if (p.parentId == perm.id) {
            sonPerm.push(p);
          }
        }
        this.wrapData(sonPerm, permList);
        sonPerm.sort((a,b)=>{
          return a.orderNum - b.orderNum;
        })
        perm.sonPerm = sonPerm;
      }
    },
    AddPermDialog(){
      this.dialogAddPermVisible=true;
    },
    alterPermData(perm) {
      if (perm.sonPerm.length == 0) {
        perm.sonPerm = undefined;
        return;
      }
      for (const p of perm.sonPerm) {
        this.alterPermData(p);
      }
    },
    getData() {
      this.$axios.post("/role/menuPerm/list").then((r) => {
        let permList = r.data.data;
        this.dataM=[];
        this.dataC=[];
        let data=[];
        for(let p of permList){
          if (p.parentId == 0) {
            data.push(p);
            this.dataM.push(p);
          }
        }
        data.sort((a,b)=>{
          return a.orderNum - b.orderNum;
        })
        for(let p of permList){
          for(let s of this.dataM){
            if(p.parentId==s.id){
              this.dataC.push(p)
            }
          }
        }
        this.wrapData(data, permList);
        for (let p of data) {
          this.alterPermData(p);
        }
        this.permData = data;
        this.loading=false;
        // console.log(this.permData);
      });
    },
  },
};
</script>